<template>
    <div class="swiper-container">
        <swiper
            direction="vertical"
            :slidesPerView="3"
            :spaceBetween="0"
            :centeredSlides="true"
            :slidesOffsetBefore="0"
            :slidesOffsetAfter="0"
            class="mySwiper"
        >
            <swiper-slide>
                <card-basic
                    chartId="0101-01"
                    style="height: 100%"
                    @click="toDetail('app01010100', 0,'bar','h')"
                >
                    <template v-slot:header>
                        <div class="echart_card_header">
                            <div class="title">現職人數</div>
                            <div class="custom_select">自選</div>
                        </div>
                    </template>
                    <template v-slot="{ getVal }">
                        <my-chart
                            style="flex: 1"
                            chartId="0101-01"
                            type="bar"
                            direction="h"
                            :params="{ year: '2023' }"
                            :data="getVal()"
                        ></my-chart>
                    </template>
                </card-basic>
            </swiper-slide>
            <swiper-slide>
                <card-basic @click="toDetail('app01010200', 1, 'bar')"> 11 </card-basic>
            </swiper-slide>
            <swiper-slide> 12 </swiper-slide>
            <swiper-slide>Slide 4</swiper-slide>
            <swiper-slide>Slide 5</swiper-slide>
            <swiper-slide>Slide 6</swiper-slide>
            <swiper-slide>Slide 7</swiper-slide>
            <swiper-slide>Slide 8</swiper-slide>
            <swiper-slide>Slide 9</swiper-slide>
        </swiper>
    </div>
</template>
<script setup>
import MyChart from '@/components/common/MyChart.vue';
import CardBasic from '@/components/common/CardBasic.vue';
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';
import { useRouter } from 'vue-router';

const router = useRouter();
const toDetail = (chartId, type,echartType = '', direction = 'h') => {
    router.push({
        path: `/${chartId}`,
        query: {
            type,
            echartType,
            direction
        }
    });
};
</script>

<style lang="scss" scoped>
.echart_card_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 px(20);
    .title {
        font-size: 20px;
        font-weight: bold;
    }
    .custom_select {
        font-size: 12px;
    }
}

.swiper-container {
    overflow: hidden;
    width: 100vw;
    height: calc(100vh - 44px);
}

.swiper {
    width: 100vw;
    height: calc(200vh - 44px);
    margin-top: -50vh;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    width: 100vw;
    height: 300px;

    display: flex;
    flex-direction: column;
    //justify-content: center;
    //align-items: center;

    transition: 300ms;
    transform: scale(0.85);
}
.swiper-slide-active,
.swiper-slide-duplicate-active {
    transform: scale(1);
}

// .swiper-slide:nth-child(1n) {
//   background-color: #f3eac5;
// }

// .swiper-slide:nth-child(2n) {
//   background-color: rgb(0, 140, 255);
// }

// .swiper-slide:nth-child(3n) {
//   background-color: rgb(10, 184, 111);
// }

// .swiper-slide:nth-child(4n) {
//   background-color: rgb(211, 122, 7);
// }

// .swiper-slide:nth-child(5n) {
//   background-color: rgb(118, 163, 12);
// }

// .swiper-slide:nth-child(6n) {
//   background-color: rgb(180, 10, 47);
// }

// .swiper-slide:nth-child(7n) {
//   background-color: rgb(35, 99, 19);
// }

// .swiper-slide:nth-child(8n) {
//   background-color: rgb(0, 68, 255);
// }

// .swiper-slide:nth-child(9n) {
//   background-color: rgb(218, 12, 218);
// }

.swiper-slide:nth-child(10n) {
    background-color: rgb(54, 94, 77);
}
</style>
